<template>
  <div class="my_box">
    <div class="my_top">
      <div class="my_topfont">
        <div>
          <van-icon name="arrow-left" class="left" @click="onClickLeft" />
        </div>
        <div>
          <span>灯具</span>
        </div>
        <div>
          <van-icon name="ellipsis" class="left" />
        </div>
      </div>
      <div class="my_ke">
        <div>
          客厅灯
        </div>
        <div class="my_kai1">
          <div class="my_zi">开关</div>
          <div>
            <van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" />
          </div>
        </div>
        <div class="my_zu">
          <div class="my_zi">
            最大
          </div>
          <div>
            45W
          </div>
        </div>
      </div>
      <div>
        <img src="../../../../public/image/roomimg/1.png" alt="" class="my_fangimg" @click="showPopup">
      </div>
    </div>
    <div>
      <van-popup v-model:show="show" position="bottom" :style="{ height: '60%' }">
        <div class="my_alertbox">
          <div class="my_shishe">
            <div>
              时间设置
            </div>
            <div class="my_shifont">
              <div class="my_fontbox">
                <van-icon name="plus" />
              </div>
              <div class="my_fontbox">
                <van-icon name="delete-o" />
              </div>
            </div>
          </div>
          <div class="my_shedubox">
            <div class="my_shedubox1">
              <van-circle v-model:current-rate="currentRate" :stroke-width="150" :size="150" :rate="rate"
                :color="gradientColor" :text="text"  :show-slider="true"  />
            </div>
            <div class="my_hua">
              <span>滑动可以设置亮度</span>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup lang="ts">

import { ref } from 'vue'
import router from '@/router';
const checked1 = ref()

const rate = ref(60)
const gradientColor = {
  '0%': ' #ffffff ',
  '100%': ' #7033ff',
};
const onClickLeft = () => {
  router.push('./Hello')
}

const currentRate = ref(75)
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const text = ref('65%')

</script>

<style scoped lang="scss">
.my_box {
  height: 100%;
  background-color: #352C5D;
}

.my_top {
  background-color: #352C5D;
  height: 25rem;

  .left {
    font-size: 2rem;
    color: white;
  }

  .my_topfont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
  }
}

.my_fangimg {
  width: 12rem;
  height: 23rem;
  position: absolute;
  top: 0.1rem;
  right: 2rem;
  background-color: #352C5D;
}


.my_shishe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 5rem;

  .my_shifont {
    display: flex;
    align-items: center;

    .my_fontbox {
      margin-left: 1rem;
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
      background-color: #F6F5FA;
      color: #352C5D;
    }
  }
}

.my_ke {
  width: 11.4rem;
  height: 10rem;
  color: #FFFFFF;
  position: absolute;
  top: 5rem;
  left: 3rem;
  line-height: 5rem;

  .my_kai1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    border-bottom: 0.2rem solid #ABA3CF;

    .my_zi {
      color: #ABA3CF;
    }
  }

  .my_zu {
    display: flex;
    justify-content: space-between;

    .my_zi {
      color: #ABA3CF;
    }
  }
}

.my_alertbox {
  padding: 1rem;

  .my_shedubox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32rem;
    text-align: center;
    flex-direction: column;

    .my_hua {
      margin-top: 2rem;
    }

    .my_shedubox1 {
      width: 20rem;
      height: 20rem;
      border-radius: 50%;
      border: 0.5rem dashed #ccc;

      .van-circle {
        margin-top: 2rem;
      }
    }
  }
}
</style>